import { useState, useEffect } from 'react'
import { Swiper, SwiperSlide } from 'antd-mobile'

interface BannerItem {
  id: string
  title: string
  subtitle: string
  imageUrl: string
  link?: string
  type: 'book' | 'activity' | 'promotion'
}

const mockBanners: BannerItem[] = [
  {
    id: '1',
    title: '六一儿童节精选',
    subtitle: '精选优质绘本，陪伴孩子快乐成长',
    imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=children%20reading%20books%20in%20a%20cozy%20room%2C%20warm%20lighting%2C%20colorful%20picture%20books%2C%20illustration%20style&image_size=landscape_16_9',
    type: 'promotion'
  },
  {
    id: '2',
    title: '情绪管理绘本系列',
    subtitle: '帮助孩子认识和表达情绪',
    imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=children%20with%20different%20emotions%2C%20picture%20book%20characters%2C%20soft%20colors%2C%20educational%20illustration&image_size=landscape_16_9',
    type: 'book'
  },
  {
    id: '3',
    title: '亲子手工活动',
    subtitle: '周末亲子时光，创意手工制作',
    imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=parents%20and%20children%20doing%20crafts%20together%2C%20colorful%20art%20materials%2C%20happy%20family%20time%2C%20warm%20illustration&image_size=landscape_16_9',
    type: 'activity'
  }
]

export function Banner() {
  const [currentIndex, setCurrentIndex] = useState(0)
  
  return (
    <div className="px-4 py-6">
      <Swiper
        autoplay
        loop
        indicator={(total, current) => (
          <div className="flex justify-center gap-1 mt-4">
            {Array.from({ length: total }).map((_, index) => (
              <div
                key={index}
                className={[
                  'w-2 h-2 rounded-full transition-all duration-300',
                  index === current ? 'bg-huiben-sky w-6' : 'bg-gray-300'
                ].join(' ')}
              />
            ))}
          </div>
        )}
        onIndexChange={setCurrentIndex}
      >
        {mockBanners.map((banner) => (
          <SwiperSlide key={banner.id}>
            <div className="relative h-48 rounded-2xl overflow-hidden">
              <img
                src={banner.imageUrl}
                alt={banner.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
              <div className="absolute bottom-4 left-4 right-4 text-white">
                <h3 className="text-lg font-bold mb-1">{banner.title}</h3>
                <p className="text-sm opacity-90">{banner.subtitle}</p>
              </div>
              
              {/* 类型标签 */}
              <div className="absolute top-4 left-4">
                <span className={[
                  "px-2 py-1 rounded-full text-xs font-semibold",
                  banner.type === 'promotion' ? 'bg-red-500 text-white' :
                  banner.type === 'book' ? 'bg-huiben-sky text-huiben-sky-dark' :
                  'bg-huiben-green text-green-800'
                ].join(' ')}>
                  {banner.type === 'promotion' ? '活动' :
                   banner.type === 'book' ? '绘本' : '亲子'}
                </span>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}